<template>
  <view class="my-container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/avatar.png'" mode="aspectFill"></image>
        <view class="info-content">
          <text class="username">{{ userInfo.name || '未登录' }}</text>
          <text class="user-id" v-if="userInfo.id">ID: {{ userInfo.id }}</text>
          <view class="login-btn" v-if="!userInfo.id" @tap="login">点击登录</view>
        </view>
      </view>
      <view class="setting-btn" @tap="goToSetting">
        <text class="iconfont icon-setting"></text>
      </view>
    </view>
    
    <!-- 账户资产 -->
    <view class="account-assets">
      <view class="asset-item" @tap="goToAssetDetail('balance')">
        <text class="asset-value">{{ userInfo.balance || '0.00' }}</text>
        <text class="asset-label">账户余额</text>
      </view>
      <view class="asset-item" @tap="goToAssetDetail('points')">
        <text class="asset-value">{{ userInfo.points || '0' }}</text>
        <text class="asset-label">我的积分</text>
      </view>
      <view class="asset-item" @tap="goToAssetDetail('coupons')">
        <text class="asset-value">{{ userInfo.coupons || '0' }}</text>
        <text class="asset-label">优惠券</text>
      </view>
    </view>
    
    <!-- 常用功能 -->
    <view class="section">
      <view class="section-title">常用功能</view>
      <view class="grid-menu">
        <view class="grid-item" v-for="(item, index) in commonFunctions" :key="index" @tap="navigateTo(item.url)">
          <view class="grid-icon" :style="{ backgroundColor: item.bgColor }">
            <image class="iconfont" :src="item.icon"></image>
          </view>
          <text class="grid-label">{{ item.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 基础服务 -->
    <view class="section">
      <view class="section-title">基础服务</view>
      <view class="list-menu">
        <view class="list-item" v-for="(item, index) in basicServices" :key="index" @tap="navigateTo(item.url)">
          <view class="item-left">
            <text class="item-name">{{ item.name }}</text>
          </view>
          <view class="item-right">
            <text class="item-desc" v-if="item.desc">{{ item.desc }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 其他服务 -->
    <view class="section">
      <view class="section-title">其他服务</view>
      <view class="list-menu">
        <view class="list-item" v-for="(item, index) in otherServices" :key="index" @tap="navigateTo(item.url)">
          <view class="item-left">
            <text class="item-name">{{ item.name }}</text>
          </view>
          <view class="item-right">
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import IconPayment from '../../static/my/icon-payment.png';
  import IconRepair from '../../static/my/icon-repair.png';
  import IconHouse from '../../static/my/icon-house.png';
  import IconParking from '../../static/my/icon-parking.png';

export default {
  data() {
    return {
      userInfo: {
        id: '10026',
        name: '刘鑫',
        avatar: '/static/avatar.png',
        balance: '1,280.50',
        points: '2,360',
        coupons: '0'
      },
      commonFunctions: [
        { name: '物业缴费', icon: IconPayment, url: '/pages/property/management-fee', bgColor: '#6A11CB' },
        { name: '我的报修', icon: IconRepair, url: '/pages/my/repairs', bgColor: '#6A11CB' },
        { name: '我的房屋', icon: IconHouse, url: '/pages/my/house', bgColor: '#6A11CB' },
        { name: '我的车位', icon: IconParking, url: '/pages/my/parking', bgColor: '#6A11CB' }
      ],
      basicServices: [
        { name: '业主信息', icon: 'icon-user', url: '/pages/my/owner', bgColor: '#ff9a9e' },
        { name: '我的物业', icon: 'icon-property', url: '/pages/property/management-fee', bgColor: '#fad0c4' },
        { name: '缴费记录', icon: 'icon-bill', url: '/pages/my/payment', bgColor: '#fbc2eb' },
        { name: '我的投诉', icon: 'icon-complaint', url: '/pages/my/complaint', bgColor: '#a18cd1' },
        { name: '门禁日志', icon: 'icon-door', url: '/pages/my/access', bgColor: '#ffecd2' }
      ],
      otherServices: [
        { name: '空置房记录', icon: 'icon-vacant', url: '/pages/my/vacant', bgColor: '#84fab0' },
        { name: '装修记录', icon: 'icon-decoration', url: '/pages/my/decoration', bgColor: '#8fd3f4' },
        { name: '订场记录', icon: 'icon-venue', url: '/pages/my/venue', bgColor: '#cfd9df' },
        { name: '预约记录', icon: 'icon-appointment', url: '/pages/my/appointment', bgColor: '#e2d1c3' },
        { name: '发票管理', icon: 'icon-invoice', url: '/pages/my/invoice', bgColor: '#96e6a1' }
      ]
    }
  },
  methods: {
    login() {
      uni.navigateTo({
        url: '/pages/login/index'
      });
    },
    goToSetting() {
      uni.navigateTo({
        url: '/pages/setting/index'
      });
    },
    goToAssetDetail(type) {
      uni.navigateTo({
        url: `/pages/asset/${type}`
      });
    },
    navigateTo(url) {
      if (!url) {
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        });
        return;
      }
      uni.navigateTo({ url });
    }
  }
}
</script>

<style lang="scss" scoped>
.my-container {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 30rpx;
}

.user-header {
  position: relative;
  height: 300rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15), transparent 60%);
    z-index: 1;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    
    .avatar {
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      margin-right: 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
    }
    
    .info-content {
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 38rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 12rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
      
      .user-id {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.15);
        padding: 4rpx 16rpx;
        border-radius: 30rpx;
        align-self: flex-start;
      }
      
      .login-btn {
        margin-top: 16rpx;
        font-size: 26rpx;
        color: #fff;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 8rpx 24rpx;
        border-radius: 30rpx;
        align-self: flex-start;
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  .setting-btn {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    
    .iconfont {
      font-size: 36rpx;
      color: #fff;
    }
  }
}

.account-assets {
  margin: -50rpx 30rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  display: flex;
  padding: 30rpx 0;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
  
  .asset-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1rpx;
      background-color: #eee;
    }
    
    .asset-value {
      font-size: 38rpx;
      font-weight: 600;
      color: #6a11cb;
      margin-bottom: 12rpx;
    }
    
    .asset-label {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.section {
  margin: 30rpx 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background-color: #6a11cb;
      border-radius: 3rpx;
    }
  }
}

.grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .grid-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      
      &:active {
        transform: scale(0.95);
      }
      
      .iconfont {
        width: 32px;
        height: 32px;
        color: #fff;
      }
    }
    
    .grid-label {
      font-size: 26rpx;
      color: #333;
    }
  }
}

.list-menu {
  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    &:active {
      background-color: #f9f9f9;
    }
    
    .item-left {
      display: flex;
      align-items: center;
      
      .item-name {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    .item-right {
      display: flex;
      align-items: center;
      
      .item-desc {
        font-size: 24rpx;
        color: #ff5252;
        margin-right: 16rpx;
        background-color: #fff0f0;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
      
      .iconfont {
        font-size: 24rpx;
        color: #ccc;
      }

      .icon-arrow-right {
        width: 32rpx;
        height: 32rpx;
        background: url('../../static/icons/arrow_right.png') no-repeat center center;
        background-size: 32rpx 32rpx;
      }
    }
  }
}

.footer {
  text-align: center;
  padding: 50rpx 0 20rpx;
  
  text {
    font-size: 24rpx;
    color: #999;
    background-color: #f5f7fa;
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
  }
}
</style> 